<template>
  <el-card class="book-card">
    <div class="card-content">
      <div class="book-prop">
        <div class="prop" :span="8">书籍名称</div>
        <div class="val" :span="16"><el-tag>{{ `《${borrow?.book.name}》` }}</el-tag></div>
      </div>

      <div class="book-prop">
        <div class="prop">出版社</div>
        <div class="val">
          <el-tag type="info"> {{ borrow?.book.publisher }}</el-tag>
        </div>
      </div>

      <div class="book-prop">
        <div class="prop">书籍编号</div>
        <div class="val"><el-tag type="info">{{ borrow?.book?.identityKey ?? "暂无编号" }}</el-tag></div>
      </div>

      <div class="book-prop">
        <div class="prop">书籍位置</div>
        <div class="val"><el-tag>{{ getDepartmentName(borrow?.book?.departmentId) }}</el-tag></div>
      </div>


      <div class="book-prop">
        <div class="prop">借阅人</div>
        <div class="val"><el-tag type="success">{{ borrow?.customerUser?.realname }}</el-tag></div>
      </div>

      <div class="book-prop">
        <div class="prop">借阅人单位</div>
        <div class="val"><el-tag>{{ getDepartmentName(borrow?.customerUser?.departmentId) }}</el-tag></div>
      </div>

    </div>
    <div class="card-footer">
      <el-button type="success" @click="handleBorrowBook(borrow)">确认借出</el-button>
      <el-button type="warning" @click="handleDisBorrowBook(borrow)">暂不借出</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import DepartmentCache from "~/store/system/departmentCache";
import { useApi } from "~/composeables";

const api = useApi();

const props = defineProps<{
  borrow: object,
  reload: Function,
}>();

const getDepartmentName = (depId: any) => {
  let match = DepartmentCache.departments.filter(x => x.id === depId);
  if (match?.length > 0) {
    return match[0]?.name;
  } else {
    return "/";
  }
};

const handleBorrowBook = (borrow: any) => {
  if (borrow.status > 0) {
    ElMessageBox.alert("这本书已经借出！");
  } else {
    ElMessageBox.confirm("确定借出这本书吗？", "确定吗？", {confirmButtonText : "确定借出", cancelButtonText: "暂不处理"})
      .then(() => {
        api.rentRecordApi.borrow(borrow.id)
          .then(res => {
            if (res.success) {
              if (props.reload) {
                ElMessageBox.alert("已确认对方的借阅请求，书籍状态已更新！")
                  .then(()=>{
                    props.reload();
                  })
              }
            }else{

              ElMessageBox.alert("借阅失败，请联系管理员！");
            }
          });
      })
      .catch(err => {
        ElMessage.info("操作已取消");
      });
  }
};

const handleDisBorrowBook = (borrow:any)=>{
  if (borrow.status > 0) {
    ElMessageBox.alert("这本书已经借出！");
  } else {
    ElMessageBox.confirm("拒绝出借这本书吗？", "确定吗？", {confirmButtonText : "确定拒绝", cancelButtonText: "暂不处理"})
      .then(() => {
        api.rentRecordApi.disBorrow(borrow.id)
          .then(res => {
            if (res.success) {
              if (props.reload) {
                ElMessageBox.alert("已拒绝对方的借阅请求，书籍状态已回滚！")
                  .then(()=>{
                    props.reload();
                  })
              }
            }else{

              ElMessageBox.alert("借阅失败，请联系管理员！");
            }
          });
      })
      .catch(err => {
        ElMessage.info("操作已取消");
      });
  }
}


</script>

<style scoped>
.book-card {
  width: 340px;
  height: 260px;
  margin: 8px;
  border-left: 3px #229966 solid;
}

.card-content {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.book-prop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
}

.prop {
  display: flex;
  justify-content: flex-start;
  width: 100px;
}

.val {
  font-size: 0.9em;
  color: #666;
}

.card-footer {
  height: 45px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
</style>